Frontend WebHID Enhedsfilter: Forklaring af Human Interface Device-valg

WebHID API'et åbner op for en verden af muligheder for webapplikationer, der giver dem mulighed for at interagere direkte med Human Interface Devices (HID'er) som gamepads, specialiserede inputenheder og mere. En kritisk del af at bruge WebHID effektivt er at forstå enhedsfiltre. Denne omfattende guide vil føre dig igennem alle aspekter af WebHID-enhedsfiltre, hvilket giver dig mulighed for at skabe kraftfulde og engagerende weboplevelser.

Hvad er WebHID?

WebHID er en web-API, der giver webapplikationer mulighed for at kommunikere med HID-enheder, der er tilsluttet en brugers computer eller mobile enhed. I modsætning til traditionelle web-API'er, der er afhængige af specifikke enhedsdrivere, leverer WebHID en generisk grænseflade til interaktion med en bred vifte af enheder, så længe brugeren giver tilladelse. Dette gør det ideelt til enheder, der ikke har indbygget browserunderstøttelse eller kræver brugerdefineret inputhåndtering.

Hvorfor bruge WebHID?

• Direkte en adgang: Kommuniker direkte med HID-enheder uden at være afhængig af browser-specifikke drivere.
• Brugerdefineret inputhåndtering: Implementer brugerdefinerede input-mapping og -behandling til specialiserede enheder.
• Bred enhed understøttelse: Understøt en bredere vifte af enheder, herunder gamepads, videnskabelige instrumenter og industrielle controllere.
• Forbedret brugeroplevelse: Skab mere fordybende og interaktive weboplevelser.

Forståelse af WebHID Enhedsfiltre

Enhedsfiltre er afgørende for at anmode om adgang til specifikke HID-enheder. Når din webapplikation kalder navigator.hid.requestDevice(), viser browseren en enheds vælger, der giver brugeren mulighed for at vælge en enhed. Enhedsfiltre giver dig mulighed for at indsnævre listen over enheder, der præsenteres for brugeren, hvilket gør det lettere for dem at finde den korrekte.

Et enhedsfilter er et JavaScript-objekt, der specificerer kriterier for at matche HID-enheder. Du kan angive flere filtre i requestDevice()-kaldet, og browseren vil kun vise enheder, der matcher mindst ét af filtrene.

Enhedsfilteregenskaber

• vendorId (valgfri): Enhedens USB Vendor ID. Dette er et 16-bit nummer, der identificerer enhedens producent.
• productId (valgfri): Enhedens USB Product ID. Dette er et 16-bit nummer, der identificerer enhedens specifikke model.
• usagePage (valgfri): Enhedens HID Usage Page. Dette identificerer enhedens kategori (f.eks. Generic Desktop Controls, Game Controls).
• usage (valgfri): Enhedens HID Usage. Dette identificerer enhedens specifikke funktion inden for usage page (f.eks. Joystick, Gamepad).

Du kan bruge en kombination af disse egenskaber til at oprette meget specifikke filtre. For eksempel kan du filtrere efter enheder med et specifikt vendorId og productId for at målrette en bestemt model af gamepad.

Praktiske Eksempler på Enhedsfiltre

Lad os se på nogle praktiske eksempler på, hvordan man bruger enhedsfiltre i dine webapplikationer.

Eksempel 1: Filtrering af en Specifik Gamepad

Antag, at du vil målrette en specifik gamepad med en kendt vendorId og productId. Du kan bruge følgende filter:

            const filters = [
  {
    vendorId: 0x045e, // Microsoft
    productId: 0x028e, // Xbox 360 Controller
  },
];

navigator.hid.requestDevice({ filters })
  .then((devices) => {
    // Håndter de valgte enheder
  })
  .catch((error) => {
    // Håndter fejl
  });

            

              
                Copy
              
            
          

I dette eksempel vil filteret kun matche enheder med et vendorId på 0x045e (Microsoft) og et productId på 0x028e (Xbox 360 Controller). Erstat disse med det relevante Vendor ID og Product ID for den enhed, du målretter.

Eksempel 2: Filtrering af Enhver Gamepad

Hvis du vil give brugeren mulighed for at vælge enhver gamepad, kan du bruge et filter, der angiver usagePage og usage for gamepads:

            const filters = [
  {
    usagePage: 0x01, // Generic Desktop Controls
    usage: 0x05, // Gamepad
  },
];

navigator.hid.requestDevice({ filters })
  .then((devices) => {
    // Håndter de valgte enheder
  })
  .catch((error) => {
    // Håndter fejl
  });

            

              
                Copy
              
            
          

Dette filter vil matche enhver HID-enhed, der identificerer sig selv som en gamepad ved hjælp af de standard HID-brugskoder.

Eksempel 3: Kombination af Filtre

Du kan kombinere flere filtre for at give mere fleksibilitet. For eksempel vil du måske tillade brugeren at vælge enten en specifik gamepad-model eller enhver gamepad:

            const filters = [
  {
    vendorId: 0x045e, // Microsoft
    productId: 0x028e, // Xbox 360 Controller
  },
  {
    usagePage: 0x01, // Generic Desktop Controls
    usage: 0x05, // Gamepad
  },
];

navigator.hid.requestDevice({ filters })
  .then((devices) => {
    // Håndter de valgte enheder
  })
  .catch((error) => {
    // Håndter fejl
  });

            

              
                Copy
              
            
          

I dette tilfælde vil enheds vælgeren vise både den specifikke Xbox 360 Controller (hvis tilsluttet) og enhver anden enhed, der identificerer sig selv som en gamepad.

Eksempel 4: Filtrering for en specifik tastaturtype på et system

Nogle niche tastaturer kræver specifikke HID-koder for at blive initialiseret korrekt. Følgende eksempel antager, at du kender vendor ID, product ID, usage page og usage for tastaturet. Du kan normalt finde disse oplysninger fra producentens dokumentation eller ved hjælp af enhedslisteringsværktøjer, der er tilgængelige på de fleste operativsystemer.

            const filters = [
    {
        vendorId: 0x1234,  // Erstat med dit vendor ID
        productId: 0x5678, // Erstat med dit product ID
        usagePage: 0x07,   // Erstat med din usage page (f.eks. Keyboard/Keypad)
        usage: 0x01      // Erstat med din usage (f.eks. Keyboard)
    }
];

navigator.hid.requestDevice({ filters })
  .then((devices) => {
    // Håndter de valgte enheder
  })
  .catch((error) => {
    // Håndter fejl
  });

            

              
                Copy
              
            
          

Hentning af Enhedsoplysninger

Når brugeren har valgt en enhed, kan du få adgang til dens oplysninger ved hjælp af HIDDevice -objektet.

Egenskaber for HIDDevice

• vendorId: Enhedens USB Vendor ID.
• productId: Enhedens USB Product ID.
• productName: Enhedens navn.
• collections: En matrix af HIDCollection -objekter, der repræsenterer enhedens HID-rapportdeskriptorer.

Du kan bruge disse oplysninger til at identificere enheden og konfigurere din applikation derefter.

Håndtering af HID-rapporter

Når du har fået en HIDDevice, skal du åbne den og begynde at lytte efter HID-rapporter. HID-rapporter er de rå data, der sendes af enheden til din applikation.

Åbning af Enheden

            device.open()
  .then(() => {
    console.log('Enhed åbnet');

    // Start lytning efter inputrapporter
    device.addEventListener('inputreport', (event) => {
      const { data, reportId } = event;
      // Behandl input rapporten
      console.log(`Modtaget input rapport med ID ${reportId}:`, data);
    });
  })
  .catch((error) => {
    console.error('Kunne ikke åbne enhed:', error);
  });

            

              
                Copy
              
            
          

Behandling af Inputrapporter

Inputrapporter modtages som DataView -objekter. Datastrukturen afhænger af enhedens HID-rapportdeskriptor. Du bliver nødt til at konsultere enhedens dokumentation for at forstå, hvordan dataene fortolkes.

Her er et forenklet eksempel på, hvordan man behandler en inputrapport:

            device.addEventListener('inputreport', (event) => {
  const { data, reportId } = event;

  // Antaget at den første byte af rapporten repræsenterer knapstatus
  const buttonState = data.getUint8(0);

  // Behandl knapstatus
  if (buttonState & 0x01) {
    console.log('Knap 1 trykket');
  }
  if (buttonState & 0x02) {
    console.log('Knap 2 trykket');
  }
});

            

              
                Copy
              
            
          

Dette er et meget grundlæggende eksempel. Virkelige HID-enheder har ofte mere komplekse rapportstrukturer. Reverse engineering af HID-rapporten kan være en kompleks proces; der findes dog værktøjer, der hjælper med parsingsprocessen.

Fejlhåndtering

Det er vigtigt at håndtere fejl yndefuldt, når du arbejder med WebHID. Her er nogle almindelige fejl, du kan støde på:

• SecurityError: Brugeren har nægtet tilladelse til at få adgang til HID-enheder.
• NotFoundError: Ingen matchende enheder blev fundet.
• InvalidStateError: Enheden er allerede åben.
• Andre fejl: USB-fejl, uventede enhedsafbrydelser.

Indpak altid din WebHID-kode i try...catch -blokke og giv informative fejlmeddelelser til brugeren.

Bedste Praksis for WebHID-udvikling

• Brug enhedsfiltre: Brug altid enhedsfiltre til at indsnævre listen over enheder, der præsenteres for brugeren.
• Giv klare instruktioner: Vejled brugerne i, hvordan de tilslutter og godkender enheden. Hvis enheden ikke vises, forklar brugeren, hvor de kan finde Vendor ID og Product IDs for almindelige enheder.
• Håndter fejl yndefuldt: Implementer robust fejlhåndtering for at give en gnidningsfri brugeroplevelse.
• Konsulter enhedsdokumentation: Henvis til enhedens dokumentation for at forstå dens HID-rapportdeskriptor.
• Test på flere platforme: Test din applikation på forskellige browsere og operativsystemer for at sikre kompatibilitet.
• Overvej sikkerhed: Vær opmærksom på sikkerhedsimplikationerne, når du arbejder med brugerinput. Saner data og undgå at køre upålidelig kode.
• Giv fallback-muligheder: Hvis WebHID ikke understøttes, eller hvis brugeren nægter tilladelse, skal du give alternative inputmetoder.

Avancerede Teknikker

Funktionsrapporter (Feature Reports)

Ud over inputrapporter kan HID-enheder også sende og modtage funktionsrapporter. Funktionsrapporter bruges til at konfigurere enheden eller hente dens status.

For at sende en funktionsrapport skal du bruge device.sendFeatureReport() -metoden.

            const reportId = 0x01;
const data = new Uint8Array([0x01, 0x02, 0x03]); // Eksempeldata

device.sendFeatureReport(reportId, data)
  .then(() => {
    console.log('Funktionsrapport sendt succesfuldt');
  })
  .catch((error) => {
    console.error('Kunne ikke sende funktionsrapport:', error);
  });

            

              
                Copy
              
            
          

For at modtage en funktionsrapport skal du bruge device.getFeatureReport() -metoden.

            const reportId = 0x01;

device.getFeatureReport(reportId)
  .then((data) => {
    console.log('Modtaget funktionsrapport:', data);
  })
  .catch((error) => {
    console.error('Kunne ikke hente funktionsrapport:', error);
  });

            

              
                Copy
              
            
          

Outputrapporter

WebHID understøtter også outputrapporter, som giver dig mulighed for at sende data *til* enheden. Du kan for eksempel bruge outputrapporter til at styre LED'er eller andre aktuatorer på enheden.

For at sende en outputrapport skal du bruge device.sendReport() -metoden.

            const reportId = 0x01;
const data = new Uint8Array([0x01, 0x02, 0x03]); // Eksempeldata

device.sendReport(reportId, data)
  .then(() => {
    console.log('Outputrapport sendt succesfuldt');
  })
  .catch((error) => {
    console.error('Kunne ikke sende outputrapport:', error);
  });

            

              
                Copy
              
            
          

Sikkerhedsovervejelser

WebHID-adgang kræver brugergodkendelse, hvilket hjælper med at afbøde nogle sikkerhedsrisici. Det er dog stadig vigtigt at være opmærksom på potentielle sårbarheder.

• Data sanitering: Saner altid data modtaget fra HID-enheder for at forhindre kodeinjektion eller andre angreb.
• Oprindelsesbegrænsninger: WebHID er underlagt same-origin policy, som forhindrer cross-origin adgang til HID-enheder.
• Brugerbevidsthed: Uddan brugerne om risiciene ved at give adgang til HID-enheder og opfordr dem til kun at give tilladelse til betroede websteder.

Globale Perspektiver og Eksempler

WebHID API'et har globale implikationer, der gør det muligt for udviklere at oprette webapplikationer, der understøtter et bredt udvalg af enheder fra forskellige producenter og regioner. Overvej disse eksempler:

• Gaming: Understøttelse af gamepads fra forskellige producenter på tværs af forskellige lande (f.eks. Sony PlayStation-controllere, Microsoft Xbox-controllere, Nintendo Switch Pro Controller og mindre kendte mærker fra Asien og Europa).
• Tilgængelighed: Oprettelse af brugerdefinerede inputenheder til brugere med handicap, idet der tages højde for forskellige regionale tilgængelighedsstandarder og præferencer. For eksempel specialiserede tastaturer eller switch-grænseflader designet til specifikke behov og tilgængelige i forskellige layouts.
• Industriel Automation: Grænseflade til industrielle controllere og sensorer, der anvendes i produktionsanlæg verden over, og understøttelse af forskellige kommunikationsprotokoller og dataformater.
• Videnskabelig Forskning: Tilslutning til videnskabelige instrumenter, der anvendes i forskningslaboratorier globalt, hvilket gør det muligt for forskere at indsamle og analysere data direkte i webapplikationer. Forestil dig at styre laboratorieudstyr på et universitet i Tokyo fra en forskers laptop i London.
• Uddannelse: Understøttelse af uddannelsesrobotter og interaktive enheder, der bruges i klasseværelser over hele verden, og giver eleverne praktiske læringsoplevelser. Dette kan omfatte kodning af robotter fremstillet i Kina, der bruges i et klasseværelse i Brasilien.

WebHID vs. Andre Web-API'er

Det er værd at bemærke, hvordan WebHID sammenlignes med andre web-API'er relateret til enhedsinteraktion:

• Gamepad API: Gamepad API'et leverer en grænseflade på højere niveau specifikt til gamepads. WebHID tilbyder mere fleksibilitet og kontrol, men kræver mere manuel håndtering af enhedsdata. Gamepad API'et er velegnet til almindelige gamepads, mens WebHID kan understøtte mere eksotiske eller specialiserede inputenheder.
• WebUSB API: WebUSB giver webapplikationer mulighed for at kommunikere direkte med USB-enheder. WebHID er specifikt designet til Human Interface Devices, mens WebUSB kan bruges til en bredere vifte af USB-enheder. WebUSB kan bruges til et specialiseret videnskabeligt instrument tilsluttet via USB, hvorimod WebHID ville blive brugt til et brugerdefineret tastatur eller mus.
• Web Serial API: Web Serial muliggør kommunikation over serielle porte. Dette er nyttigt til interaktion med indlejrede systemer og andre enheder, der kommunikerer over serielle forbindelser. En mikrocontroller, der sender data over en seriel forbindelse, kunne bruge Web Serial, mens et brugerdefineret joystick ville bruge WebHID.

Fremtiden for WebHID

WebHID API'et udvikler sig konstant, med igangværende bestræbelser på at forbedre dets sikkerhed, ydeevne og brugervenlighed. Efterhånden som flere enheder adopterer HID-standarden, vil WebHID blive et stadig vigtigere værktøj for webudviklere. Forvent at se flere avancerede funktioner og forbedret browserunderstøttelse i fremtiden.

Konklusion

WebHID er et kraftfuldt API, der åbner op for et bredt spektrum af muligheder for webapplikationer. Ved at forstå enhedsfiltre og hvordan man håndterer HID-rapporter, kan du skabe engagerende og interaktive weboplevelser, der udnytter det fulde potentiale af Human Interface Devices. Uanset om du bygger et spil, et tilgængelighedsværktøj eller et industrielt kontrolsystem, kan WebHID hjælpe dig med at forbinde din webapplikation til den fysiske verden. Husk at prioritere brugeroplevelsen, sikkerhed og cross-platform kompatibilitet for at skabe succesfulde og globalt tilgængelige WebHID-applikationer.